/****多范围调整滑块begin****/


.slider-box {
    width:800px;
    margin:30px auto;
    height:40px;
    display: flex;
    align-items: center;

}
.jc-slider-box {
    width:100%;
    height:4px;
    background-color:#0ba360;
    border-radius:2px;
    position:relative
}
.jc-slider-item {
    position:absolute;
    top:-8px;
    width:16px;
    height:16px;
    border-radius:10px;
    background-color:#fff;
    border:2px solid #00ac66;
    line-height:16px;
    text-align:center;
    transition:transform .3s ease-in-out
}
.jc-slider-item:not(.slider-item:nth-child(1)) {
    cursor:crosshair
}
.jc-slider-item-active {
    transform:scale(1.2)
}
.jc-slider-item .jc-slider-item-label {
    position:absolute;
    top:30px;
    left:50%;
    transform:translateX(-50%);
    width:110px;
    background-color:rgba(0,0,0,0.5);
    line-height:30px;
    color:#fff;
    font-size:8px;
    border-radius:15px;
    padding:0 3px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    display: none;
}
.jc-slider-item-label:after{
    content:'';
    display: block;
    width:0px;
    height: 0px;
    border-width:8px;
    position:absolute;
    border-style:solid;
    top:-16px;
    border-color:transparent transparent rgba(0,0,0,0.5) transparent;
}
.jc-slider-item-label div{
    width:100%;
}
.jc-slider-item .jc-slider-item-label-top{
    position:absolute;
    top:-80px;
    left:50%;
    transform:translateX(-50%);
    width:110px;
    background-color:rgba(0,0,0,0.5);
    line-height:30px;
    color:#fff;
    font-size:8px;
    border-radius:15px;
    padding:0 3px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    display: none;
}
.jc-slider-item-label-top:after{
    content:'';
    display: block;
    width:0px;
    height: 0px;
    border-width:8px;
    position:absolute;
    border-style:solid;
    top:60px;
    border-color:rgba(0,0,0,0.5) transparent transparent transparent;
}
.slider-box-obj{
    width:800px;
    margin:30px auto;
    height:40px;
    display: flex;
    align-items: center;
}

/****多范围调整滑块end****/


/**播放器滑块组件begin**/
#playSlider-box{
    width:100%;
    height: 40px;
    /*background-color:#0000FF;*/
    position: relative;
}
.jc-play-slider{
    position:absolute;
    width:100%;
    height: 4px;
    /*background-color:#E6E6E6;*/
    top:50%;
    transform:translateY(-50%);
    left:0px;
    background-image:linear-gradient(to right,#FF4F4F 0%,#E6E6E6 0%);
    cursor:pointer;
    transform-origin:right;
    transition-delay: .2s;
    transition-property: transform;
    transition-timing-function: linear;
    transition-duration: 0.2s;
}
.jc-play-slider .jc-slider-control{
    position:absolute;
    width:10px;
    height: 10px;
    border-radius: 5px;
    /*background-color:#ED4242;*/
    left:-5px;
    top:-3px;
    transition:transform .2s linear;
}

.jc-play-slider .jc-slider-control:hover{
    transform:scale(1.5);
}
.slider-control-active{
    transform:scale(1.5);
}
.jc-moveing{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: 0 0;
    z-index: 9999999999;
}


/**播放器滑块组件end**/

/**播放器控制组件begin**/

.jc-play-progress{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jc-play-nowTime,.jc-play-endTime{
    font-size:10px;
    color:rgba(0,0,0,0.3);
    margin:0px 10px;
    transform-origin:right;
    transition-property: transform;
    transition-timing-function: linear;
    transition-duration: 0.2s;
}
.jc-play-nowTime{
    transition-delay: 0s;
}
.jc-play-endTime{
    transition-delay: .4s;
}
.jc-play-play-or-pause-icon{
    width:40px;height: 40px;
    /*margin:0 5px;*/
    background-repeat: no-repeat;
    background-position: center;
    background-size:100%;
}
.jc-play-btn{
    background-image:url('../img/playbtn.png');
}
.jc-pause-btn{
    background-image:url('../img/pausebtn.png');
}
.jc-play-circle-btn{
    background-image:url('../img/play-circle-fill.png');
}
.jc-pause-circle-btn{
    background-image:url('../img/pause-circle-fill.png');
}
.jc-pause-loading{
    background-image:url("../img/loading.png");
    animation-duration: .5s;
    animation-name:rotateAnimate;
    animation-timing-function: linear;
    animation-delay: revert;
    animation-fill-mode: revert;
    animation-iteration-count: infinite;
}
.jc-erro-btn{
    background-image:url("../img/bug-report.png");
}
/**播放器控制组件end**/


.transform-scaleX-0{
    transform:scaleX(0);
}
.transform-scaleX-1{
    transform:scaleX(1);
}

@keyframes rotateAnimate {
    from {
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}
